<template>
  <XenPageLayout title="访客预约记录" title-align="left">
    <div class="record">
      <!-- 使用uni-list和uni-list-item组件展示预约列表 -->
      <uni-list>
        <uni-list-item
          v-for="(item, index) in recordList"
          :key="index"
          clickable
          :border="true"
          :to="`/subpkg-visitor/visitor/sysvisitorrecordrequestbill/details?id=${item.ID}`"
          :showArrow="true"
        >
          <template #body>
            <view class="list-body">
              <view class="info-content">
                <view class="info-row">
                  <text class="info-label">姓名：</text>
                  <text class="info-value">{{ item.Name || "暂无" }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">预约时间：</text>
                  <text class="info-value">{{
                    formatDateTime(item.ReservationTime) || "暂无"
                  }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">事由名称：</text>
                  <text class="info-value">{{
                    item.VisitorReasonName || "暂无"
                  }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">接待人：</text>
                  <text class="info-value">{{
                    item.Receptionist || "暂无"
                  }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">手机号：</text>
                  <text class="info-value">{{ item.Phone || "暂无" }}</text>
                </view>
                <view class="info-row" v-if="item.Company">
                  <text class="info-label">公司：</text>
                  <text class="info-value">{{ item.Company }}</text>
                </view>
              </view>
              <!-- 状态徽章 -->
              <view
                class="status-badge"
                :class="getStatusClass(item.WorkflowStatus)"
              >
                {{ getStatusText(item.WorkflowStatus) }}
              </view>
            </view>
          </template>
        </uni-list-item>
      </uni-list>

      <!-- 无数据提示 -->
      <view class="empty-tip" v-if="recordList.length === 0">
        暂无预约记录
      </view>
    </div>
  </XenPageLayout>
</template>

<script lang="ts" setup>
import XenPageLayout from "@/layouts/XenPageLayout.vue";
import { ref } from "vue";
import { formatDateTime } from "../../../utils/xenUtils";
import { onShow } from "@dcloudio/uni-app";
import SysVisitorReasonApi from "./api/index";
import type { ISearchResponse } from "./api/interface";

// 预约记录列表
const recordList = ref<ISearchResponse[]>([]);

onShow(() => {
  fetchAppointmentRecords();
});

// 获取预约记录列表
const fetchAppointmentRecords = async () => {
  const api = SysVisitorReasonApi();

  const res = await api.search({
    Page: 1,
    Limit: 100,
  });

  recordList.value = res.Data;
};

// 状态文本映射
const getStatusText = (status: string | undefined) => {
  const statusMap: Record<string, string> = {
    待提交: "待提交",
    提交中: "提交中",
    审核中: "审核中",
    已完成: "已完成",
    已取消: "已取消",
  };
  return statusMap[status || ""] || "未知状态";
};

// 状态样式类映射
const getStatusClass = (status: string | undefined) => {
  const statusClassMap: Record<string, string> = {
    待提交: "status-pending",
    提交中: "status-submitting",
    审核中: "status-reviewing",
    已完成: "status-completed",
    已取消: "status-cancelled",
  };
  return statusClassMap[status || ""] || "status-unknown";
};
</script>

<style lang="scss" scoped>
.record {
  padding: 30rpx 20rpx;
  min-height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #f8f8f8, #ffffff);
}

:deep(.uni-list-item) {
  padding: 0rpx 25rpx;
}

.list-body {
  padding: 10rpx 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 20rpx;

  .info-content {
    flex: 1;

    .info-row {
      display: flex;
      margin-bottom: 10rpx;
      font-size: 28rpx;

      .info-label {
        color: #666;
        width: 160rpx;
        flex-shrink: 0;
      }

      .info-value {
        color: #333;
        flex: 1;
      }
    }
  }

  .status-badge {
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    color: #fff;
    font-weight: 500;
    flex-shrink: 0;
    align-self: center;

    &.status-pending {
      background-color: #b3b7bc;
    }

    &.status-submitting {
      background-color: #73b3ff;
    }

    &.status-reviewing {
      background-color: #edb563;
    }

    &.status-completed {
      background-color: #85d65a;
    }

    &.status-cancelled {
      background-color: #f78989;
    }

    &.status-unknown {
      background-color: #d3d7dd;
    }
  }
}

:deep(.uni-list) {
  background: transparent !important;
}

:deep(.uni-list--border) {
  border-radius: 10rpx;
  overflow: hidden;
  margin: 0 20rpx;
}

:deep(.uni-list-item) {
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

:deep(.uni-list-item__container) {
  padding: 24rpx;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 60rpx 0;
  font-size: 28rpx;
}
</style>
